<template>
	<div class="container">
		<!-- 顶部导航栏 -->
		<div class="navbar">
			<span class="title">订单详情</span>
		</div>

		<!-- Tab 切换栏 -->
		<div class="tab-bar">
			<span class="tab" :class="{ active: currentTab === 0 }" @click="switchTab(0)">基本信息</span>
			<span class="tab" :class="{ active: currentTab === 1 }" @click="switchTab(1)">接单信息</span>
			<span class="tab" :class="{ active: currentTab === 2 }" @click="switchTab(2)">维修上传</span>
			<span class="tab" :class="{ active: currentTab === 3 }" @click="switchTab(3)">缴费信息</span>
			<span class="tab" :class="{ active: currentTab === 4 }" @click="switchTab(4)">我的评价</span>
		</div>

		<!-- 已评价提示 -->
		<div class="rating-info">
			<div class="status">
				<span class="status-text">已评价</span>
				<span class="status-date">2023-12-25 08:26</span>
			</div>
			<span class="rating-message">请您放心等待，我们已安排师傅接单</span>
		</div>

		<!-- 预约信息 -->
		<div class="section">
			<div class="section-header">预约信息</div>
			<div class="info-item">
				<span class="label">预约服务：</span>
				<span class="value">修补墙皮</span>
			</div>
			<div class="info-item">
				<span class="label">预约时间：</span>
				<span class="value">2023-02-15 09:00</span>
			</div>
			<div class="info-item">
				<span class="label">服务地址：</span>
				<span class="value">永安道49号安德公寓1-302</span>
			</div>
			<div class="info-item">
				<span class="label">备注信息：</span>
				<span class="value">墙皮脱落补墙皮</span>
			</div>
		</div>

		<!-- 订单信息 -->
		<div class="section">
			<div class="section-header">订单信息</div>
			<div class="info-item">
				<span class="label">订单号：</span>
				<span class="value">278775688667766776</span>
				<a href="#" class="copy-link" @click.prevent="copyOrderId">复制</a>
			</div>
			<div class="info-item">
				<span class="label">下单时间：</span>
				<span class="value">2023-02-15 09:00</span>
			</div>
		</div>

		<!-- 接单信息 -->
		<div class="section">
			<div class="section-header">接单信息</div>
			<div class="info-item">
				<img class="worker-img" src="/static/images/worker.png" />
				<div class="worker-info">
					<span class="worker-name">张国三</span>
					<span class="worker-cert">三级认证</span>
				</div>
				<button class="contact-btn" @click="contactWorker">📞</button>
			</div>
			<div class="info-item">
				<span class="label">接单时间：</span>
				<span class="value">2023-02-15 10:00</span>
			</div>
		</div>

		<!-- 维修单 -->
		<view class="container">
			<view class="bill-title">维修单</view>
			<view class="total-amount">需缴费金额：278.00元</view>
			<view class="repair-bill">
				<view class="table-header">
					<view class="table-cell">单项</view>
					<view class="table-cell">单价（元）</view>
					<view class="table-cell">数量</view>
				</view>
				<view class="table-row" v-for="(item, index) in repairItems" :key="index">
					<view class="table-cell">{{ item.name }}</view>
					<view class="table-cell">{{ item.price }}</view>
					<view class="table-cell">{{ item.quantity }}</view>
				</view>
			</view>
			<view class="total">合计：278.00元</view>
			<view class="timestamp">提交时间：2023-02-15 09:00</view>
		</view>

		<!-- 缴费 -->
		<view class="container">
			<view class="section">
				<view class="section-title">缴费完成</view>
				<view class="section-content">
					<view class="row">
						<view class="label">缴费金额：</view>
						<view class="value">278.00元</view>
					</view>
					<view class="row">
						<view class="label">缴费时间：</view>
						<view class="value">2023-02-15 09:00</view>
					</view>
				</view>
			</view>

			<!-- 我的评价 -->
			<view class="section">
				<view class="section-title">我的评价</view>
				<view class="section-content">
					<view class="row">
						<view class="label">满意度：</view>
						<view class="star">★★★★★</view>
					</view>
					<view class="tags">
						<view class="tag">服务态度好</view>
						<view class="tag">干活细致</view>
						<view class="tag">超预期</view>
					</view>
					<view class="row">
						<view class="label">评价内容：</view>
						<view class="value">师傅很实在，一会就修好了</view>
					</view>
					<view class="row">
						<view class="label">评价时间：</view>
						<view class="value">2023-02-15 09:00</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 操作按钮 -->
		<div class="action-buttons">
			<button class=" round-button follow-up-btn" @click="goToReviewPage">追评</button>
			<button class=" round-button customer-service-btn" @click="goToOnlineService">在线客服</button>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				repairItems: [{
						name: '上门费',
						price: 30,
						quantity: '-'
					},
					{
						name: '软管',
						price: 20,
						quantity: 2
					},
					{
						name: '涂料',
						price: 200,
						quantity: 1
					},
					{
						name: '配件',
						price: 58,
						quantity: 6
					}
				],
				paymentAmount: '278.00元',
				paymentTime: '2023-02-15 09:00',
				satisfaction: '★★★★★',
				evaluationTags: ['服务态度好', '干活细致', '超预期'],
				evaluationContent: '师傅很实在，一会就修好了',
				evaluationTime: '2023-02-15 09:00',
				currentTab: 0
			};
		},
		methods: {
			switchTab(index) {
				this.currentTab = index;
			},
			copyOrderId() {
				// 复制订单号逻辑
				console.log('订单号已复制');
			},
			contactWorker() {
				// 联系工人逻辑
				console.log('联系工人');
			},
			goToReviewPage() {
				// 使用 Vue 路由跳转到追评页面
				uni.navigateTo({
					url: '/pages/index/order/ReviewPage'
				});
			},
			goToOnlineService() {
				// 联系客服逻辑
				uni.navigateTo({
					url:'/pages/index/order/OnlinService'
				})
			},
		}
	};
</script>

<style scoped>
	.container {
		padding: 20px;
		background-color: #f9f9f9;
	}

	.navbar {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 10px 0;
	}

	.title {
		font-size: 18px;
		font-weight: bold;
	}

	.tab-bar {
		display: flex;
		justify-content: space-around;
		margin-bottom: 15px;
	}

	.tab {
		padding: 10px;
		font-size: 14px;
		color: #999;
	}

	.tab.active {
		color: #007AFF;
		border-bottom: 2px solid #007AFF;
	}

	.rating-info {
		background-color: #ffffff;
		padding: 15px;
		margin-bottom: 15px;
	}

	.status {
		display: flex;
		justify-content: space-between;
	}

	.status-text {
		font-size: 14px;
		font-weight: bold;
		color: #007AFF;
	}

	.status-date {
		font-size: 12px;
		color: #888;
	}

	.rating-message {
		margin-top: 10px;
		font-size: 12px;
		color: #555;
	}

	.section {
		background-color: #ffffff;
		margin-bottom: 15px;
		padding: 15px;
	}

	.section-header {
		font-size: 14px;
		font-weight: bold;
		margin-bottom: 10px;
		color: blue;
	}

	.info-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10px;
	}

	.label {
		font-size: 14px;
		color: #333;
	}

	.value {
		font-size: 14px;
		color: #666;
	}

	.star {
		color: yellow;
	}

	.copy-link {
		color: #007AFF;
		font-size: 12px;
		text-decoration: underline;
		cursor: pointer;
	}

	.worker-img {
		width: 40px;
		height: 40px;
		border-radius: 50%;
	}

	.worker-info {
		flex-grow: 1;
		margin-left: 10px;
	}

	.worker-name {
		font-size: 14px;
		font-weight: bold;
	}

	.worker-cert {
		font-size: 12px;
		color: #666;
	}

	.contact-btn {
		color: white;
		padding: 5px;
		border-radius: 3px;
	}

	/* 底部操作按钮 */
	.action-buttons {
		display: flex;
		justify-content: flex-end;
		position: fixed;
		bottom: 20px;
		right: 20px;

	}


	/* 圆形按钮 */
	.round-button {
		border-radius: 20px;
		border: none;
		cursor: pointer;
		margin-left: 10px;
	}

	/* 追评按钮 */
	.follow-up-btn {
		background-color: #ccc;
		left: 2px;
	}

	.follow-up-btn:hover {
		background-color: #999;
	}

	/* 在线报修按钮 */
	.customer-service-btn {
		background-color: white;
		color: blue;
	}

	.customer-service-btnn:hover {
		background-color: #0056b3;
	}

	.payment-btn:hover {
		background-color: #0056b3;
	}

	.container {
		padding: 20px;
		background-color: #fff;
		font-family: Arial, sans-serif;
	}

	.bill-title {
		font-size: 20px;
		color: #4c00ff;
		margin-bottom: 10px;
	}

	.total-amount {
		font-size: 16px;
		color: #333;
		margin-bottom: 20px;
	}

	.repair-bill {
		border: 1px solid #e0e0e0;
		border-radius: 5px;
		overflow: hidden;
	}

	.table-header,
	.table-row {
		display: flex;
		justify-content: space-between;
		padding: 10px;
	}

	.table-header {
		background-color: #f8f8f8;
		font-weight: bold;
	}

	.table-cell {
		flex: 1;
		text-align: center;
	}

	.table-row:nth-child(even) {
		background-color: #f8f8f8;
	}

	.total {
		text-align: right;
		margin-top: 10px;
		font-size: 16px;
	}

	.timestamp {
		margin-top: 10px;
		font-size: 14px;
		color: #999;
		text-align: right;
	}

	.container {
		padding: 20px;
		background-color: #f8f8f8;
		font-family: Arial, sans-serif;
	}

	.section {
		background-color: #fff;
		border-radius: 5px;
		padding: 15px;
		margin-bottom: 20px;
	}

	.section-title {
		font-size: 18px;
		color: #4c00ff;
		margin-bottom: 10px;
	}

	.section-content {
		font-size: 16px;
		color: #333;
	}

	.row {
		display: flex;
		justify-content: space-between;
		margin-bottom: 10px;
	}

	.label {
		font-weight: bold;
	}

	.value {
		color: #333;
	}

	.tags {
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 10px;
	}

	.tag {
		background-color: white;
		border-radius: 3px;
		padding: 5px 10px;
		margin-right: 10px;
		margin-bottom: 5px;
		font-size: 14px;
	}
</style>